<!-- 首页 -->
<template>
	<view class="page-container">
    <view class="title-section">
      <u-icon name="calendar"></u-icon>
      <view class="datetime">{{data.datetime}}</view>
      <view class="age">{{data.age}}</view>
    </view>
    <view class="content-section">
      {{data.content}}
    </view>
    <view class="image-section">
      <image class="img" v-for="(img, index) in data.images" :src="img" :key="index"></image>
    </view>
	</view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default: {},
      },
    },
    methods: {
    }
  };
</script>

<style lang="scss" scoped>
  .page-container {
    font-size: 28rpx;
    margin: 16rpx;
    padding: 20rpx;
    background: #FFFFFF;
    box-shadow: 0px 2px 5px 0px rgba(226, 240, 255, 0.5);
    border-radius: 6px;
    
    .title-section {
      font-weight: 500;
      color: #3EA9FF;
      
      .u-icon {
        font-size: 32rpx;
      }
      
      .datetime,
      .age {
        margin-left: 12rpx;
        display: inline-block;
      }
      
      .age {
        font-size: 18rpx;
      }
    }
  
    .content-section {
      margin-top: 20rpx;
      margin-bottom: 8rpx;
      color: #333333;
    }
    
    .image-section {
      display: flex;
      
      .img {
        width: 220rpx;
        height: 220rpx;
        margin-top: 8rpx;
        margin-right: 8rpx;
        
        &:nth-child(3) {
          margin-right: 0;
        }
      }
    }
  }
</style>
